﻿<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>AngularJS Demo</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script src="controllers.js"></script>
    <script src="filters.js"></script>
    <script>

        var myApp = angular.module("exampleApp",
            ["exampleApp.Controllers", "exampleApp.Filters",
                "exampleApp.Services", "exampleApp.Directives"]);

        myApp.constant("startTime", new Date().toLocaleTimeString());
        myApp.config(function (startTime) {
            console.log("Main module config: " + startTime);
        });
        myApp.run(function (startTime) {
            console.log("Main module run: " + startTime);
        });

        angular.module("exampleApp.Directives", [])
            .directive("highlight", function ($filter) {

                var dayFilter = $filter("dayName");

                return function (scope, element, attrs) {
                    if (dayFilter(scope.day) == attrs["highlight"]) {
                        element.css("color", "red");
                    }
                }
            });

        var now = new Date();
        myApp.value("nowValue", now);

        angular.module("exampleApp.Services", [])
            .service("days", function (nowValue) {
                this.today = nowValue.getDay();
                this.tomorrow = this.today + 1;
            })
            .config(function () {
                console.log("Services module config: (no time)");
            })
            .run(function (startTime) {
                console.log("Services module run: " + startTime);
            });

    </script>

</head>
<body>
    <div class="panel">
        <div class="page-header">
            <h3>AngularJS App</h3>
        </div>
        <h4 ng-controller="dayCtrl" highlight="Monday">
            Today is {{day || "(unknown)" | dayName}}
        </h4>
        <h4 ng-controller="tomorrowCtrl">
            Tomorrow is {{day || "(unknown)" | dayName}}
        </h4>
    </div>
</body>
</html>
